import { defineComponent, reactive } from "vue";
import styles from "./LyricsSign.module.less";
export default defineComponent({
  props: {
    state: {
      type: Object,
    }
  },
  setup(props: any) {
    return () => (
      <div class={styles.flows}>
        <div class={styles.step}>
          <div class={styles['step-flag']}>第一步</div>
          <span>填入节拍</span>
        </div>
        <div class={styles['step-content']}>
          <a-input-number style="width:300px;" placeholder="请填写曲谱节拍" v-model:value={props.state.beat} />
        </div>
        <div class={styles.step}>
          <div class={styles['step-flag']}>第二步</div>
          <span>填入速度</span>
        </div>
        <div class={styles['step-content']}>
          <a-input-number style="width:300px;" placeholder="请填写曲谱速度" v-model:value={props.state.temp} />
        </div>
        <div class={styles.step}>
          <div class={styles['step-flag']}>第三步</div>
          <span>填入歌词</span>
        </div>
        <div class={styles['step-content']}>
          <a-textarea style={{ height: "240px" }} v-model:value={props.state.value} placeholder="请输入歌词,换行请使用回车" />
        </div>
      </div>
    )
  }
})